<template>
    <div class="dashboard">
      <!-- 存款趋势图 -->
      <el-card class="chart-card">
        <div slot="header">
          <span>存款趋势分析</span>
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleDateChange"
          />
        </div>
        <div ref="depositTrendChart" style="height: 300px;"></div>
      </el-card>
  
      <!-- 客户区域分布图 -->
      <el-card class="chart-card">
        <div slot="header">
          <span>客户区域分布</span>
          <el-input-number
            v-model="minAmount"
            :step="1000"
            :min="0"
            @change="loadAreaData"
          />
        </div>
        <div ref="customerAreaChart" style="height: 300px;"></div>
      </el-card>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts'
  import { getDepositTrend, getCustomerAreaDist } from '@/api/nsh/chart'
  
  export default {
    data() {
      // 计算最近一个月的日期范围
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30) // 30天前

      return {
        dateRange: [start, end],  // 设置默认值
        minAmount: 10000,
        depositTrendChart: null,
        customerAreaChart: null
      }
    },
    mounted() {
      this.initCharts()
      this.loadData()
    },
    methods: {
      initCharts() {
        this.depositTrendChart = echarts.init(this.$refs.depositTrendChart)
        this.customerAreaChart = echarts.init(this.$refs.customerAreaChart)
      },
      async loadData() {
        await this.loadTrendData()
        await this.loadAreaData()
      },
      async loadTrendData() {
        const [startDate, endDate] = this.dateRange
        const res = await getDepositTrend(startDate, endDate)
        if (res.code === 200) {
          const option = {
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['活期存款', '定期存款', '协议存款']
            },
            xAxis: {
              type: 'category',
              data: res.data.map(item => item.date)
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                name: '活期存款',
                type: 'line',
                data: res.data.map(item => item.demand_amount)
              },
              {
                name: '定期存款',
                type: 'line',
                data: res.data.map(item => item.time_amount)
              },
              {
                name: '协议存款',
                type: 'line',
                data: res.data.map(item => item.agreement_amount)
              }
            ]
          }
          this.depositTrendChart.setOption(option)
        }
      },
      async loadAreaData() {
        const startDate = this.dateRange[0]
        const res = await getCustomerAreaDist(startDate, this.minAmount)
        if (res.code === 200) {
          const option = {
            tooltip: {
              trigger: 'item'
            },
            series: [
              {
                type: 'pie',
                radius: ['40%', '70%'],
                data: res.data.map(item => ({
                  name: item.area_name,
                  value: item.total_amount
                }))
              }
            ]
          }
          this.customerAreaChart.setOption(option)
        }
      },
      handleDateChange() {
        this.loadTrendData()
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .dashboard {
    .chart-card {
      margin-bottom: 20px;
      
      ::v-deep .el-card__header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
  }
  </style>